<template>
    <div class="search-container">
        <el-input
            v-model="seekerInput"
            placeholder="请输入搜索内容"
            prefix-icon="el-icon-search"
            clearable
        >
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"
                >搜索</el-button
            >
        </el-input>
    </div>
</template>

<script>
export default {
    data() {
        return {
            seekerInput: ''
        }
    },
    methods: {
        handleSearch() {
            this.$store.commit('setSeekerSearchData', this.seekerInput)
            this.$message('搜索内容:' + this.$store.state.seekerSearchData.seekerInput)
        }
    }
}
</script>

<style  scoped>
.search-container {
    margin: 20px;
}

.el-input {
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.el-input .el-input__inner {
    border-radius: 25px;
}

.el-button {
    background-color: #409eff;
    color: white;
}

.el-button:hover {
    background-color: #66b1ff;
}
</style>
